<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>Bootstrap 你好，世界！</title>
  <meta name="Author" content="神棍、Falost and SCK TeAm">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap -->
  <link href="../static/css/bootstrap.min.css" rel="stylesheet">
  <!--[if lt IE 9]>
      <script src="../static/js/html5shiv.min.js"></script>
      <script src="../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<div style="height: 500px;width: 100vw">
  <div id="skill" style="height: 100%;width: 100%"></div>
</div>

</body>
<!--<script src="../static/js/jquery-1.11.3.min.js"></script>-->
<!--<script src="../static/js/bootstrap.min.js"></script>-->
<script src="../static/js/echarts.min.js"></script>
<script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('skill'));
  function fetchData(cb) {
    // 通过 setTimeout 模拟异步加载
    setTimeout(function () {
      cb({
        value: [98,95,93,80,65,51,85,98]
      });
    }, 1000);
  }
  // 指定图表的配置项和数据
  option = {
    title: {
      text: '技能分布图',
      x:'center'
    },
    tooltip: {
      trigger: 'item'
    },
    radar: [
      {
        indicator: [
          {text: 'HTML', max: 100},
          {text: 'CSS', max: 100},
          {text: 'javaScript', max: 100},
          {text: 'Node', max: 100},
          {text: 'PHP', max: 100},
          {text: 'Anguler', max: 100},
          {text: 'Bootstrap', max: 100},
          {text: 'jQuery', max: 100}
        ],
        center:['40%','40%'],
        radius: 120
      }
    ],
    series: [
      {
        type: 'radar',
        tooltip: {
          trigger: 'item'
        },
        itemStyle: {normal: {areaStyle: {type: 'default'}}},
        data: []
      },
      {
        name: '访问来源',
        type: 'pie',
        radius : '55%',
        center: ['70%', '40%'],
        data:[
          {value:335, name:'直接访问'},
          {value:310, name:'邮件营销'},
          {value:234, name:'联盟广告'},
          {value:135, name:'视频广告'},
          {value:1548, name:'搜索引擎'}
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]

  };
  myChart.setOption(option);
  fetchData(function (data) {
    myChart.setOption({
      series: [
        {
          data: [{
            value : data.value,
            name:'技能熟练度'
          }]
        }
      ]
    })
  });
  // 使用刚指定的配置项和数据显示图表。
  //myChart.setOption(option);
  //app.currentIndex = -1;

</script>
</html>